<script setup lang="ts">
import type { PopoverPlacement } from 'naive-ui'
import type { Component } from 'vue'
import Icon from './icon.vue'

defineOptions({ name: 'ButtonIcon' })

interface Props {
  icon?: Component | null
  tooltipContent?: string
  tooltipPlacement?: PopoverPlacement
  color?: string
  size?: string | number
  onClick?: () => void
}

const props = withDefaults(defineProps<Props>(), {
  icon: null,
  tooltipContent: '',
  tooltipPlacement: 'bottom',
  color: '',
  size: '16',
  onClick: () => {}
})

const handleClick = () => {
  props.onClick()
}
</script>

<template>
  <n-tooltip trigger="hover" :z-index="90">
    <template #trigger>
      <n-button @click="handleClick" quaternary>
        <slot>
          <Icon :icon="icon" :size="props.size" :color="props.color" />
        </slot>
      </n-button>
    </template>
    {{ tooltipContent }}
  </n-tooltip>
</template>

<style scoped></style>
